<template>
	<view class="view-root">
		<!--100---待支付
			200---待发货
			300---待收货
			500---已完成
			900---已取消  -->
		<view :class="orderStatusClass[orderInfo.status]"></view>
		<scroll-view class="content-scroll" scroll-y="true">
			<view class="scroll-flex-wrap">
				<view class="order-title">
					<view v-if="forVerify" class="status-name">自提订单扫码核销</view>
					<view v-if="!forVerify" class="status-name">{{orderInfo.statusName}}</view>
					<view class="status-discribe">{{orderInfo.statusDesc ? orderInfo.statusDesc: ''}}</view>
				</view>
				<view v-if="forVerify || orderInfo.receivingWay == 2" class="pick-wrap">
					<view class="info-line">
						<image src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_pick_user.png"></image>
						<view class="main-text" style="flex: 1;margin-left: 16rpx;">收货人：{{orderInfo.userAddress.name}}</view>
						<view class="main-text">{{orderInfo.userAddress.phone}}</view>
					</view>
					<view class="divider"></view>
					<view class="info-line">
						<image src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_store_location.png"></image>
						<view class="main-text" style="flex: 1;margin-left: 16rpx;">药店联系人：{{orderInfo.merchantAddress.name}}</view>
						<view class="main-text">{{orderInfo.merchantAddress.phone}}</view>
					</view>
					<view class="address-text">{{orderInfo.merchantAddress.province + orderInfo.merchantAddress.city + orderInfo.merchantAddress.district + orderInfo.merchantAddress.address}}</view>
				</view>
				<view v-if="orderInfo.receivingWay == 1 && orderInfo.userAddress && (orderInfo.status < 300 || orderInfo.status == 900)"
					class="address-wrap">
					<image
						src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_order_detail_address.png">
					</image>
					<view class="address-info">
						<view class="address-name">{{orderInfo.userAddress.name}} {{orderInfo.userAddress.phone}}</view>
						<view class="address-location">
							{{orderInfo.userAddress.province + orderInfo.userAddress.city + orderInfo.userAddress.district + orderInfo.userAddress.address}}
						</view>
					</view>
				</view>
				<view v-if="orderInfo.receivingWay == 1 && orderInfo.status >= 300 && orderInfo.status < 900"
					class="express-wrap">
					<view class="current-trace-info" @click="showOrHideExpress()">
						<image style="width: 46rpx;height: 46rpx;position: absolute;right: 0;"
							src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_gray_right.png">
						</image>
						<view class="trace-discribe">{{orderInfo.expressInfo.data[0].context}}</view>
						<view class="trace-time">{{orderInfo.expressInfo.data[0].time}}</view>
						<view class="express-trace-line-wrap">
							<view class="no-trace-line-top"></view>
							<view class="trace-line-ball-color"></view>
							<view class="trace-line-bottom"></view>
						</view>
					</view>
					<view class="target-info">
						<view class="target-location">
							送至{{orderInfo.userAddress.province + orderInfo.userAddress.city + orderInfo.userAddress.district + orderInfo.userAddress.address}}
						</view>
						<view class="target-name">{{orderInfo.userAddress.name}} {{orderInfo.userAddress.phone}}</view>
						<view class="express-trace-line-wrap">
							<view class="trace-line-top"></view>
							<view class="trace-line-ball"></view>
						</view>
					</view>
				</view>
				<view v-if="orderInfo.status == 3" class="refuse-info-wrap">
					<view class="refuse-reason-title">拒绝原因</view>
					<view class="refuse-reason">{{orderInfo.refusedReason}}</view>
				</view>
				<view class="store-wrap">
					<view class="store-title">
						<image
							src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_store_location.png">
						</image>
						<view class="store-title-text">{{orderInfo.merchantName}}</view>
					</view>
					<view v-for="(medicine, index) in orderInfo.commodityList" :key="index" class="medicine-wrap">
						<view class="valid-medicine">
							<view class="medicine-pic-wrap">
								<image :src="medicine.thumbnailUrl" class="medicine-pic"></image>
								<view v-if="medicine.recipeFlag > 0" class="prescription-tag">处方药</view>
							</view>
							<view class="info-wrap">
								<view class="medicine-name nowrap">{{medicine.name}}</view>
								<view class="medicine-pack">规格：{{medicine.specification}}</view>
							</view>
							<view class="price-count-wrap">
								<view class="medicine-price">￥{{medicine.salesPrice}}</view>
								<view class="medicine-count">×{{medicine.count}}</view>
							</view>
						</view>
						<view class="medicine-usage">用法用量：{{medicine.usageStr}}</view>
						<view v-if="orderInfo.status == 300 || orderInfo.status == 500" class="after-sale-btn"
							@click="toRequestAfter(medicine)">{{medicine.afterSaleFlag == 0 ? '申请售后': '售后详情'}}</view>
					</view>
				</view>
				<view v-if="!isAfterSale" class="price-wrap">
					<view class="price-form-line">
						<view class="price-form-title">药品金额</view>
						<view class="price-form-content">￥{{orderInfo.commodityAmount}}</view>
					</view>
					<view class="price-form-line">
						<view class="price-form-title">运费</view>
						<view class="price-form-content">￥{{orderInfo.freightAmount}}</view>
					</view>
					<view class="price-form-line">
						<view class="price-form-title">优惠券</view>
						<view class="price-form-content" style="color: #FC4E4C;">-￥{{orderInfo.couponAmount}}</view>
					</view>
					<view class="price-total-line">
						<view class="price-total-title">实付款：</view>
						<view class="price-total-number">￥{{orderInfo.orderAmount}}</view>
					</view>
				</view>
				<view v-if="!isAfterSale" class="order-info-wrap">
					<view class="info-form-line">
						<view class="info-form-title">订单编号：</view>
						<view class="info-form-content">{{orderInfo.orderCode}}</view>
					</view>
					<view class="info-form-line">
						<view class="info-form-title">备注：</view>
						<view class="info-form-content">{{orderInfo.remark ? orderInfo.remark: '无'}}</view>
					</view>
					<view class="info-form-line">
						<view class="info-form-title">下单时间：</view>
						<view class="info-form-content">{{orderInfo.createdTime}}</view>
					</view>
					<view v-if="orderInfo.status > 100 && orderInfo.payTime" class="info-form-line">
						<view class="info-form-title">支付时间：</view>
						<view class="info-form-content">{{orderInfo.payTime}}</view>
					</view>
					<view v-if="orderInfo.status > 100 && orderInfo.payTime" class="info-form-line">
						<view class="info-form-title">支付方式：</view>
						<view class="info-form-content">{{orderInfo.payWay}}</view>
					</view>
					<view class="info-form-line">
						<view class="info-form-title">发货方式：</view>
						<view class="info-form-content">{{orderInfo.receivingWayStr}}</view>
					</view>
					<view class="copy-btn" @click="setClipboardData(orderInfo.orderCode)">复制</view>
				</view>
				<view v-if="isAfterSale" class="refund-info-wrap">
					<view class="refund-left-wrap">
						<view class="refund-title">退款金额</view>
						<view class="refund-notice-wrap">
							<image src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_info_notice.png"></image>
							<view class="refund-notice">随访模板只能选择一个</view>
						</view>
					</view>
					<view class="refund-price">￥{{orderInfo.refundAmount}}</view>
				</view>
				<view v-if="isAfterSale" class="order-info-wrap">
					<view class="info-form-line">
						<view class="info-form-title">申请时间：</view>
						<view class="info-form-content">{{orderInfo.createdTime}}</view>
					</view>
					<view class="info-form-line">
						<view class="info-form-title">物流公司：</view>
						<view class="info-form-content">{{orderInfo.expressCompany}}</view>
					</view>
					<view class="info-form-line">
						<view class="info-form-title">物流单号：</view>
						<view class="info-form-content">{{orderInfo.expressNo}}</view>
						<view class="express-copy-btn" @click="setClipboardData(orderInfo.expressNo)">复制</view>
					</view>
					<view class="info-form-line">
						<view class="info-form-title">申请原因：</view>
						<view class="info-form-content">{{orderInfo.refundReason ? orderInfo.refundReason: '无'}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view v-if="!isAfterSale && !forVerify && orderInfo.status < 500" class="bottom-panel">
			<view v-if="orderInfo.status == 100" class="normal-btn" @click="cancelOrder()">取消订单</view>
			<view v-if="orderInfo.status == 100" class="confirm-btn" @click="payOrder()">去支付</view>
			<view v-if="orderInfo.status == 200 && (!orderInfo.refundStatusExplain || orderInfo.refundStatusExplain == '')" class="normal-btn" @click="cancelOrder()">申请退单</view>
			<view v-if="orderInfo.status == 200 && (orderInfo.refundStatusExplain && orderInfo.refundStatusExplain != '')" class="status-text">{{ orderInfo.refundStatusExplain }}</view>
			<view v-if="orderInfo.status == 300" class="confirm-btn"
				@click="confirmOrder()">确认收货</view>
			<view v-if="orderInfo.status == 200 && orderInfo.receivingWay == 2" class="confirm-btn">核销码</view>
		</view>
		<view v-if="forVerify" class="bottom-panel">
			<view class="confirm-btn" @click="verifyOrder()">核销</view>
		</view>
		<view v-if="showExpress" class="express-traces-root">
			<view class="express-traces-wrap">
				<view class="express-info-line">
					<view class="express-name-code">{{orderInfo.expressInfo.name}} {{orderInfo.expressInfo.nu}}</view>
					<view class="copy-btn" @click="setClipboardData(orderInfo.expressInfo.nu)">复制</view>
				</view>
				<scroll-view scroll-y="true" class="traces-scroll">
					<view v-for="(trace, index) in orderInfo.expressInfo.data" :key="index" class="trace-wrap">
						<view :class="index == 0 ? 'trace-current': 'trace-old'">{{trace.time}}</view>
						<view :class="index == 0 ? 'trace-current': 'trace-old'">{{trace.context}}</view>
						<view class="express-trace-line-wrap">
							<view :class="index > 0 ? 'trace-line-top': 'no-trace-line-top'"></view>
							<view :class="index == 0 ? 'trace-line-ball-color': 'trace-line-ball'"></view>
							<view v-if="index < orderInfo.expressInfo.data.length - 1" class="trace-line-bottom"></view>
						</view>
					</view>
				</scroll-view>
			</view>
			<image class="close-btn"
				src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_float_close_white.png"
				@click="showOrHideExpress()"></image>
		</view>
		<view v-if="showAfterDialog" class="after-sale-dialog-root">
			<view class="after-sale-dialog">
				<view class="content-wrap">
					<view class="explain-notice">申请退款，请先与机构沟通确认，并完成以下信息填写，待机构审核。</view>
					<picker mode="selector" :range="courierList" range-key="title" @change="courierChoose"
						:value="choosedExpress">
						<view class="dialog-form-line">
							<view class="dialog-form-star">*</view>
							<view class="dialog-form-title">物流公司：</view>
							<view class="dialog-form-content">{{choosedExpress.title}}</view>
							<image style="width: 46rpx;height: 46rpx;"
								src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_gray_right.png">
							</image>
						</view>
					</picker>

					<view class="divider-line"></view>
					<view class="dialog-form-line">
						<view class="dialog-form-star">*</view>
						<view class="dialog-form-title">物流单号：</view>
						<input class="dialog-form-content" placeholder="请输入" maxlength="20"
							placeholder-style="color:#B0B2B1" v-model="afterExpressNo" />
					</view>
					<view class="divider-line"></view>
					<view class="dialog-form-line">
						<view class="dialog-form-star">*</view>
						<view class="dialog-form-title">退款原因：</view>
						<input class="dialog-form-content" placeholder="请输入" maxlength="50"
							placeholder-style="color:#B0B2B1" v-model="afterReason" />
					</view>
					<view class="divider-line"></view>
				</view>
				<view class="divider-line"></view>
				<view class="button-wrap">
					<view class="dialog-cancel-btn" @click="cancelAfter()">取消</view>
					<view class="vertical-divider-line"></view>
					<view class="dialog-confirm-btn" @click="submitAfter()">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 100---待支付 200---待发货 300---待收货 500---已完成 900---已取消
				// 售后单 1:待审核 2:审核通过 3:审核拒绝
				orderStatusClass: {
					1: 'status-wait-bg',
					2: 'status-finish-bg',
					3: 'status-after-sale-bg',
					100: 'status-wait-bg',
					200: 'status-wait-bg',
					300: 'status-finish-bg',
					500: 'status-finish-bg',
					900: 'status-cancel-bg'
				},
				orderCode: "",
				// 不为空代表是售后订单
				medicineId: null,
				isAfterSale: false,
				orderInfo: {},
				courierList: [],
				showAfterDialog: false,
				choosedExpress: {
					"value": "",
					"text": "请选择",
					"title": "请选择"
				},
				afterExpressNo: '',
				afterReason: '',
				handleMedicine: {},
				showExpress: false,
				countDown: 0,
				payFlag: true ,//支付按钮开关
				forVerify: false
			};
		},
		onLoad(options) {
			this.orderCode = options.code;
			this.medicineId = options.medicineId;
			this.isAfterSale = this.medicineId != null;
			this.forVerify = options.forVerify != null;
		},
		onShow() {
			this.getOrderDetail();
		},
		methods: {
			getOrderDetail() {
				if (this.medicineId) {
					this.$api.getAfterSaleDetail({
						params: {
							code: this.orderCode,
							commodityId: this.medicineId
						}
					}).then(res => {
						if (res.code == 200) {
							this.orderInfo = res.result;
						} else {
							uni.showToast({
								icon: "none",
								title: res.message
							})
						}
					})
				} else {
					this.$api.getMedicineOrderDetail({
						params: {
							orderCode: this.orderCode
						}
					}).then(res => {
						if (res.code == 200) {
							this.orderInfo = res.result;
							if (this.orderInfo.status == 100) {
								this.countDown = setInterval(() => {
									this.orderInfo.leaveOverPayTime --;
									if (this.orderInfo.leaveOverPayTime == 0) {
										clearInterval(this.countDown);
										this.countDown = 0;
										this.getOrderDetail();
									} else {
										this.orderInfo.statusDesc = '等待支付，' + this.secTotime(this.orderInfo.leaveOverPayTime) + '后订单自动关闭'
									}
								}, 1000)
							}
						} else {
							uni.showToast({
								icon: "none",
								title: res.message
							})
						}
					})
				}
			},
			//复制内容到剪切版
			setClipboardData(data) {
				uni.setClipboardData({
					data: data,
					success: res => {
						uni.showToast({
							title: '复制成功',
							icon: "none"
						});
					}
				});
			},
			showOrHideExpress() {
				this.showExpress = !this.showExpress;
			},
			//发起微信支付
			payOrder() {
				this.gotoRouter('/pages-mall/orderCreate/orderCreate?orderCode=' + this.orderCode);
				// if (this.payFlag) {
				// 	this.payFlag = false;
				// 	this.$api
				// 		.payOrder({
				// 			data: {
				// 				codeList: [this.orderInfo.orderCode]
				// 			}
				// 		})
				// 		.then(res => {
				// 			if (res.code == 200) {
				// 				this.wxRequestPayment(res.result);
				// 			} else {
				// 				uni.showToast({
				// 					title: res.message,
				// 					icon: 'none'
				// 				});
				// 			}
				// 		});
				// }
			},
			//微信小程序拉起支付
			wxRequestPayment(res) {
				wx.requestPayment({
					timeStamp: res.timeStamp,
					nonceStr: res.nonceStr,
					package: res.packageValue,
					signType: res.signType,
					paySign: res.paySign,
					success: success => {
						uni.showToast({
							title: '支付成功',
							icon: 'none'
						});
						this.getOrderDetail();
					},
					fail: error => {
						uni.showToast({
							title: '取消支付',
							icon: 'none'
						});
						uni.navigateBack({
							delta: 1
						});
					},
					complete: () => {
						this.payFlag = true;
					}
				});
			},
			// 确认收货
			confirmOrder() {
				uni.showModal({
					title: `确定要确认收货吗？`,
					success: res => {
						if (res.confirm) {
							this.$api.confirmMedicineOrder({
								data: {
									code: this.orderCode
								}
							}).then(res => {
								if (res.code == 200) {
									uni.showToast({
										icon: "success",
										title: '订单确认成功'
									});
									this.getOrderDetail();
								} else {
									uni.showToast({
										icon: "none",
										title: res.message
									})
								}
							})
						}
					}
				});
			},
			// 取消订单
			cancelOrder() {
				uni.showModal({
					title: `确定要取消订单吗？`,
					success: res => {
						if (res.confirm) {
							this.$api.cancelMedicineOrder({
								data: {
									code: this.orderCode
								}
							}).then(res => {
								if (res.code == 200) {
									uni.showToast({
										icon: "success",
										title: '订单取消成功'
									});
									this.getOrderDetail();
								} else {
									uni.showToast({
										icon: "none",
										title: res.message
									})
								}
							})
						}
					}
				});
			},

			// 弹出售后申请弹框
			toRequestAfter(medicine) {
				this.handleMedicine = medicine;
				if (medicine.afterSaleFlag == 1) {
					// 跳转售后详情
					this.gotoRouter('/pages-order/orderDetail/orderDetail?code=' + this.orderCode + '&medicineId=' +
						medicine.id);
				} else {
					if (this.courierList.length == 0) {
						this.$api
							.queryDictItemsByCode({
								params: {
									code: 'courier_type'
								}
							})
							.then(res => {
								this.courierList = res;
								this.showAfterDialog = true;
							});
					} else {
						this.showAfterDialog = true;
					}
				}
			},

			courierChoose(e) {
				this.choosedExpress = this.courierList[e.detail.value];
			},

			cancelAfter() {
				this.showAfterDialog = false;
			},

			submitAfter() {
				if (this.choosedExpress.value != '' && this.afterExpressNo != '' && this.afterReason != '') {
					this.$api.requestAfterSale({
						data: {
							"orderCode": this.orderCode,
							"commodityId": this.handleMedicine.id,
							"expressCode": this.choosedExpress.value,
							"expressNo": this.afterExpressNo,
							"refundReason": this.afterReason
						}
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'none',
								title: "售后申请提交成功"
							});
							this.showAfterDialog = false;
							this.getOrderDetail();
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							})
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: "请将申请信息填写完整"
					})
				}
			},
			
			verifyOrder() {
				this.$api.orderVerify({
					params: {
						"orderCode": this.orderCode
					}
				}).then(res => {
					if (res.code == 200) {
						
					} else {
						uni.showToast({
							icon:"none",
							title: res.message
						})
					}
				})
			},
			
			secTotime(s) {
			      var t = '';
			      if(s > -1){
			        var hour = Math.floor(s/3600)
			        var min = Math.floor(s/60) % 60
			        var sec = s % 60
					if (hour > 0) {
						t = hour + "小时"
					}
					if (min > 0) {
						t += min + "分"
					}
			        if(sec < 10){
			          t += "0"
			        } 
			        t += sec.toFixed(0)
			      } 
			      return t + '秒'
			}
		}
	}
</script>

<style lang="less" scoped>
	@import './orderDetail.less';
</style>
